<extend name="Base:dialog" />
<block name="dialog-header">
<h3>添加模块</h3>
</block>
<block name="dialog-body">
<title>图片上传裁剪</title>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/jquery.imgareaselect-0.9.10/css/imgareaselect-default.css" media="all" >
<link rel="stylesheet" type="text/css" href="__PUBLIC__/uploadify/uploadify.css" media="all" >

<script data-main="__PUBLIC__/js/main" type="text/javascript" src="__PUBLIC__/js/require.min.js?123"></script>
<style type="text/css">
#image-uploaded,
#image-cuted{
    position:relative;
    max-width:100%;
}
#cut-preview-wrap{
    position:relative;
    display:block;
    padding:0;
    margin:0;
    border:0;
    width:100%;
    overflow:hidden;
}
#cut-preview{
    position:absolute;
    padding:0;
    margin:0;
    border:0;
    top:0;
    left:0;
}
</style>

<form role="form" name="form1" action="{:U('Module/add')}" method="post">
	<div class="form-group">
		<label for="module_name">模块名字</label> <input type="text"
			class="form-control" name="name" id="module_name"
			placeholder="请输入模块名字">
	</div>
	<div class="form-group">
		<label for="image">模块图片</label> 
		<div id="image">
			<div id="upload-bt">
				<input type="file" id="file" name="file" /> <br> 
			</div>
			<div class="row" id="upload-img">

			</div>
			<a id="cut" style="margin-top: 30px; display: none;" class="btn btn-warning" href="#">确定裁剪区</a>
			
			<div id="upload-wrap" style="display: none;">
				<div class="row" id="cut-wrap">
					<div class="col-xs-6">
						<label for="">裁剪区域</label>
						<div class="row">
							<div class="col-xs-12" id="uploaded-wrap"></div>
						</div>
					</div>
					<div class="col-xs-6" id="preview-wrap">
						<label for="">裁剪预览</label>
						<div id="cut-preview-wrap">
							<img id="cut-preview" src="" alt="">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="form-group">
		<label for="module_subtitle">小标题</label> <input type="text"
			class="form-control" name="subtitle" id="module_subtitle"
			placeholder="请输入模块小标题">
	</div>
	<div class="form-group">
		<label for="module_intro">简介</label> <input type="text"
			class="form-control" name="intro" id="module_intro"
			placeholder="请输入模块简介">
	</div>
	<div class="form-group">
		<label for="selectCitys">所属城市</label> 
		<div class="controls">
			<select name="city" id="selectCitys" class="form-control"
				data-rel="chosen" data-placeholder="请选择模块所属城市">
				<option></option>
				<foreach name="citys" item="city" >
					<option value="{$city.id}">{$city.city}</option>
				</foreach>
			</select>
		</div>
	</div>
	<div class="form-group">
		<label class="control-label" for="selectScenics">包含的景区 </label>
		<div class="controls">
			<select name="scenics[]" id="selectScenics" multiple class="form-control"
				data-rel="chosen" data-placeholder="请选择所包含的景区">
			</select>
		</div>
	</div>
	<div class="form-group">
		<label class="control-label" for="selectDiets">包含的餐饮 </label>
		<div class="controls">
			<select name="diets[]" id="selectDiets" multiple class="form-control"
				data-rel="chosen" data-placeholder="请选择所包含的餐饮">
			</select>
		</div>
	</div>
	<div class="form-group">
		<label class="control-label" for="selectHotels">包含的酒店 </label>
		<div class="controls">
			<select name="hotels[]" id="selectHotels" multiple class="form-control"
				data-rel="chosen" data-placeholder="请选择所包含的酒店">
			</select>
		</div>
	</div>
	<div class="form-group">
		<p class="center"><button type="submit" class="btn btn-primary">提交</button></p>
	</div>
</form>
<script type="text/javascript">
// 	$("#selectScenics option[value='SA42832886971446']").attr("selected","selected");  
	$('[data-rel="chosen"],[rel="chosen"]').chosen({
		no_results_text : "未找到此选项!", 
		width:"100%" ,
		max_selected_options: 4
		});
	$('#selectCitys').change(function(){
		var checkText=$(this).find("option:selected").text();  //获取景区的名字
		var checkValue=$(this).val();  //获取获取的ID
// 		console.log(checkText+":"+checkValue);
		//清空景区列表
		$('#selectScenics,#selectHotels,#selectDiets').html("");
//         $("#selectScenics").trigger("chosen:updated");
        
		$.ajax({
            url : '__CONTROLLER__/query',
            data:{city:checkText,id:checkValue},
            cache : false, //是否缓存
            async : true,//是否异步
            type : "POST",
            dataType : 'json',
            success : function (result){
               console.log(result);
               //将新景区的内容添加到景区下拉框里
               var scenic = "";
               var slist = result['scenic'];
               for(i=0;i<slist.length;i++){
            	   scenic+= "<option value=\""+slist[i]['id']+"\">"+slist[i]['name']+"</option>";
               }
               $('#selectScenics').html(scenic);
               //更新景区下拉框
               $("#selectScenics").trigger("chosen:updated");
               
               //将新餐饮的内容添加到餐饮下拉框里
               var diet = "";
               var dlist = result['diet'];
               for(i=0;i<dlist.length;i++){
            	   diet+= "<option value=\""+dlist[i]['id']+"\">"+dlist[i]['name']+"</option>";
               }
               $('#selectDiets').html(diet);
               //更新餐饮下拉框
               $("#selectDiets").trigger("chosen:updated");
               
               //将新酒店的内容添加到酒店下拉框里
               var hotel = "";
               var hlist = result['hotel'];
               for(i=0;i<hlist.length;i++){
            	   hotel+= "<option value=\""+hlist[i]['id']+"\">"+hlist[i]['name']+"</option>";
               }
               $('#selectHotels').html(hotel);
               //更新酒店下拉框
               $("#selectHotels").trigger("chosen:updated");
               
            },
        })
	});
</script>
</block>